<template>
	<view class="tabbar-container">
		<view class="item" v-for="(tab, i) in tabbarList" :key="i" @click="goPage(tab)">
			<view class="icon-text-container">
				<my-icon :name="tab.icon" :size="tab.size" :color="iconColor(tab.text, i)"></my-icon>
				<text v-if="tab.text" :class="{ activeTxt: active === i }">{{ tab.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "myTabbar",
	props: {
		active: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			tabbarList: [
				{
					icon: "079aiqing",
					text: "首页",
					size: 42,
					url: "/pages/index/index",
				},
				{
					icon: "dongtai",
					text: "动态",
					size: 42,
					url: "/pages/moment/index",
				},
				{
					icon: "fabu",
					size: 72,
					url: "/pages/moment/new",
				},
				{
					icon: "Love-Mail",
					text: "消息",
					size: 42,
					url: "/pages/message/index",
				},
				{
					icon: "my-love",
					text: "我的",
					size: 42,
					url: "/pages/user/base/index",
				},
			],
		};
	},
	methods: {
		goPage(tab) {
			uni.navigateTo({
				url: tab.url,
			});
		},
		iconColor(text, index) {
			if (!text) {
				return '#FC3B5B'; // 保持没有text属性的项为红色
			}
			return this.active === index ? '#FF69B4' : '#000';
		}
	}
}
</script>

<style scoped lang="scss">
@import "/static/css/theme.scss";

.tabbar-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	bottom: 20rpx;
	left: 2%;
	width: 96%;
	height: 100rpx;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 60rpx;
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20rpx);
	z-index: 99999;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	
	.icon-text-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	text {
		font-size: 24rpx;
		color: #000;
	}
	
	.activeTxt {
		color: $lv-txt-pink;
	}
}
</style>
